<template>
  <div class="LineChart" :id="id" :style="styles"></div>
</template>

<script>
import { getDetailsCount, countDay } from '@/api/echarts'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/chart/line')

export default {
  name: 'LineChart',
  props: {
    id: {
      type: String,
      default: 'LineChart'
    },
    height: {
      type: String,
      default: '100%'
    },
    width: {
      type: String,
      default: '100%'
    },
    chartData: Array
  },
  data() {
    return {
      styles: {
        height: this.height,
        width: this.width
      },
      certainData: [],
      dieData: [],
      recureData: [],
      dateData: []
    }
  },
  mounted() {
    countDay().then(res => {
      console.log('日期', res)
      if (res.code == 200) {
        this.draw(res.data)
      }
    })
  },
  methods: {
    initData() {
      this.chartData.forEach(item => {
        this.certainData.push(item.certain)
        this.dieData.push(item.die)
        this.recureData.push(item.recure)
        this.dateData.push(item.date)
      })
    },

    draw(data) {
      // this.initData()
      let valueData = []
      let lableData = []
      data.map(item => {
        valueData.push(item.confirm)
        lableData.push(item.createDate)
      })
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          text: '每日确诊人数',
          left: 'center',
          textStyle: {
            color: '#fff',
            textBorderWidth: '2',
            fontSize: 20
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#d984f3'
            }
          }
        },
        legend: {
          data: lableData
        },
        color: ['#ee44ee', '#8555a8', '#d984f3'],
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: lableData,
            inverse: true,
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff'
              },
              formatter: value => {
                return value / 10000 + '万'
              }
            }
          }
        ],
        series: [
          {
            name: '确诊病例',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: valueData
          }
        ]
      }
      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" >
</style>
